<template>
  <section>
    <div class="head">
      <i class="iconfont" @click="get">&#xe64b;</i>
      <span>在线支付</span>
    </div>
    <div class="d1">
      <p>支付剩余时间</p >
      <span>00 : {{minute}} : {{second}}</span>
    </div>
    <div class="d2">
      <span>选择支付方式</span>
    </div>
    <div class="d3">
      <i class="iconfont1">&#xe64a;</i>
      <span>支付宝</span>
      <el-radio v-model="radio" label="1" class="r1">请选择</el-radio>
    </div>
    <div class="d3">
      <i class="iconfont1">&#xe613;</i>
      <span>微信</span>
      <el-radio v-model="radio" label="2" class="r1">请选择</el-radio>
    </div>
    <button class="btn btn-success b1" @click="block">确定支付</button>

    <div class="dis"  v-if="!show">
      <div class="topT">
        <i class="iconfont7">&#xe611;</i>
        <p>暂不开放支付功能</p>
      </div>
      <button class="btn1" @click="none">确定</button>
    </div>

    <div class="dis1"  v-if="!show1">
      <div class="topT">
        <i class="iconfont7">&#xe611;</i>
        <p>当前环境无法支付，请打开官方App进行付款</p>
      </div>
      <router-link :to="{name:'indent'}"><button class="btn1">确定</button></router-link>
    </div>
  </section>
</template>

<script>
  export default {
    name: "BuyVip",
    data(){
      return{
        minutes: 15,
        seconds: 0,
        hour:0,
        radio:'1',
        show:true,
        show1:true
      };
    },
    mounted(){
      this.add();
    },
    created(){
      this.show=false
    },
    methods: {
      get() {
        this.$router.go(-1);
      },
      block(){
        this.show1=false
      },
      none(){
        this.show=true
      },
      // 倒计时
      num: function(n) {
        return n < 10 ? "0" + n : "" + n;
      },
      add: function() {
        let _this = this;
        let time = window.setInterval(function() {
          if (_this.seconds === 0 && _this.minutes !== 0) {
            _this.seconds = 59;
            _this.minutes -= 1;
          } else if (_this.minutes === 0 && _this.seconds === 0) {
            _this.seconds = 0;
            window.clearInterval(time);
          } else {
            _this.seconds -= 1;
          }
        }, 1000);
      },
    },
    watch: {
      second: {
        handler(newVal) {
          this.num(newVal);
        }
      },
      minute: {
        handler(newVal) {
          this.num(newVal);
        }
      }
    },
    computed: {
      second: function() {
        return this.num(this.seconds);
      },
      minute: function() {
        return this.num(this.minutes);
      }
    }
  }
</script>

<style scoped>
  .iconfont{
    font-family:"iconfont" !important;
    font-size:0.26rem;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    float:left;
    color: white;
  }
  .head{
    width: 100%;
    height: 0.5rem;
    background-color: blue;
    line-height:0.5rem ;
    font-size: 0.2rem;
    position: fixed;
    top: 0;
    z-index: 2;
  }
  .head span{
    color: white;
  }
  .d1{
    width: 100%;
    padding-top: 0.5rem;
    text-align: center;
    padding-bottom: 0.4rem;
  }
  .d1>p{
    margin-top: 0.4rem;
    font-size: 0.18rem;
  }
  .d1>span{
    font-size: 0.45rem;
  }
  .d2{
    width: 100%;
    background-color: gainsboro;
    padding-top: 0.08rem;
    padding-bottom: 0.08rem;
    padding-left: 0.2rem;
  }
  .d2>span{
    font-size: 0.2rem;
  }
  .d3{
    border-bottom: 0.01rem solid gainsboro;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    padding-left: 0.1rem;
  }
  .iconfont1{
    font-family:"iconfont" !important;
    font-size:0.26rem;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    color: blue;
  }
  .r1{
    float: right;
  }
  .b1{
    width: 95%;
    margin-left: 0.1rem;
    margin-top: 0.2rem;
  }
  .dis{
    width: 70%;
    height: 1.4rem;
    background-color: white;
    position: absolute;
    top: 1.6rem;
    left: 0.6rem;
    text-align: center;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
  }
  .dis1{
    width: 70%;
    height: 1.6rem;
    background-color: white;
    position: absolute;
    top: 1.6rem;
    left: 0.6rem;
    text-align: center;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
  }
  .btn1{
     width: 100%;
     height: 0.4rem;
     color: white;
     font-size: 0.18rem;
     margin-top: 0.1rem;
     background-color: green;
     border-bottom-left-radius: 0.1rem;
     border-bottom-right-radius: 0.1rem;
   }
  .iconfont7{
    font-family:"iconfont" !important;
    font-size:0.7rem;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    color: orange;
  }
</style>
